<template>
  <div>
      <!-- 卡片 -->
      <el-card class="box-card">
          <!-- 头像区域 -->
          <div class="top">
              <div class="div_img">
                  <img src="../assets/touxiang.jpg" alt="">
              </div>
              <div class="div_content">
                  <p>
                      <span>格温不受影响</span>
                      <span class="lv">LV7</span>
                      <i class="el-icon-coffee-cup"></i>
                  </p>
                  <hr>
                  <br>
                  <p>个人简介：总有一剪刀与格温心意相通</p>
                  <p>所在地区：广西 桂林</p>

              </div>
          </div>

            <!-- 常听区域 -->
            <div class="div_botton">
                <span>常听歌曲</span>
                 <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="歌曲"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="歌手"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="次数">
      </el-table-column>
    </el-table>
            </div>

    </el-card>
  </div>
</template>

<script>
export default {
        data() {
        return {
          tableData: [{
            date: '借月',
            name: '王天阳',
            address: '26'
          }, {
            date: '一半',
            name: '薛之谦',
            address: '14'
          }, {
            date: '奢香夫人',
            name: '凤凰传奇',
            address: '10'
          }, {
            date: '星河万里',
            name: '星月',
            address: '6'
          }]
        }
      }
}
</script>

<style>
.top{
    
}
.div_img{
    width: 200px;
    height: 200px;
    margin:0px 30px;
    float: left;
}
.div_img img{
    width: 100%;
    height: 100%;
}
.div_content{
    /* margin: 30px; */
    float: left;
    
}
.div_botton{
    clear: both;
    position: relative;
    top: 30px;
}
.lv{
    border: 2px solid red;
    border-radius: 18px;
    font-size: 10px;
    color: red;
}
</style>